<template>
  <el-image
    class="Communication"
    :src="img"
    fit="contain"
    key="Communication"
    @click="openPwaTip"
  />
</template>

<script setup>
import { ref, defineExpose, onMounted } from "vue";

const img = require("@/assets/Communication.png");
const deferredPrompt = ref(null);
onMounted(() => {
  // 初始化 pwa安装
  window.addEventListener("beforeinstallprompt", function (e) {
    // 将事件返回存储起来
    deferredPrompt.value = e;
    // 取消默认事件
    e.preventDefault();
    return false;
  });
});
// 初始化 pwa安装
function openPwaTip() {
  if (deferredPrompt.value != null) {
    // 异步触发横幅显示
    deferredPrompt.value.prompt();
  }
}
</script>

<style lang="scss" scoped>
.Communication {
  height: 100%;
  width: 50%;
  max-height: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
</style>>